[#macro timeRange]
<style>
    /* 时间 */
    .time {
        padding: 10px 14px;
        border: 1px dashed #e9e9e9;
        overflow: hidden;
    }

    .time .time_l {
        float: left;
        line-height: 30px;
    }

    .time .time_l .timeItem {
        font-size: 10px;
        color: #666666;
        padding-right: 14px;
        margin-right: 14px;
        border-right: 1px solid #898989;
        display: inline-block;
        cursor: pointer;
        line-height: 10px;
    }

    .time .time_l .curren {
        color: #5491de;
    }

    .time .time_r {
        float: left;
    }

    .time .time_r .timeItem {
        font-size: 10px;
        display: inline-block;
        padding: 0 20px;
        line-height: 30px;
        color: #666666;
        border: 1px solid #d9d9d9;
        margin-right: 10px;
        cursor: pointer;
    }

    .time .time_r .curren {
        color: #5491de;
        border-color: #5491de;
    }
</style>
<script type="text/x-template" id="my-nb-timeRange">
  <div class="time">
    <div class="time_l">
            <span v-for="(item, index) in time" :key="index" :class="[item.state ? 'curren' : '']" class="timeItem"
                  @click="timeToggle(index)">{{ item.text }}</span>
    </div>
    <div class="time_r" v-for="(item, idx) in time" :key="idx" v-if="item.state">
            <span v-for="(item, index) in item.children.time" :key="index" :class="[item.state ? 'curren' : '']"
                  class="timeItem" @click="childrenTimeToggle(idx, index)">{{ item.text }}</span>
      <el-date-picker value-format="yyyy-MM-dd" v-if="time[0].state" style="vertical-align: middle"
                      v-model="dayValue" size="small" type="daterange" @change="getTime" range-separator="~"
                      start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-date-picker v-if="time[1].state" style="vertical-align: middle" v-model="monthValue" size="small"
                      value-format="yyyy-MM-dd" type="monthrange" @change="getMonthTime" range-separator="~"
                      start-placeholder="开始月份" end-placeholder="结束月份">
      </el-date-picker>
    </div>
  </div>
</script>
<script>
      Vue.component('time-range', {
        template: '#my-nb-timeRange',
        data() {
            return {
                time: [{
                        type: "day",
                        text: "按日",
                        state: true,
                        children: {
                            time: [{
                                    text: "昨日",
                                    state: false,
                                    startTime: "",
                                    endTime: "",
                                },
                                {
                                    text: "近7日",
                                    state: true,
                                    startTime: "",
                                    endTime: "",
                                },
                                {
                                    text: "近30日",
                                    state: false,
                                    startTime: "",
                                    endTime: "",
                                },
                            ],
                            startTimeText: "开始时间",
                            endTimeText: "结束时间",
                            timeType: "date",
                            timeValue: "timeValue",
                        },
                    },
                    {
                        type: "month",
                        text: "按月",
                        state: false,
                        children: {
                            time: [{
                                    text: "当月",
                                    state: false,
                                    startTime: "",
                                    endTime: "",
                                },
                                {
                                    text: "近3月",
                                    state: true,
                                    startTime: "",
                                    endTime: "",
                                },
                                {
                                    text: "近半年",
                                    state: false,
                                    startTime: "",
                                    endTime: "",
                                },
                            ],
                            startTimeText: "开始月份",
                            endTimeText: "结束月份",
                            timeType: "year",
                            timeValue: "timeValue",
                        },
                    },
                ],
                dayValue: "",
                monthValue: "",
                searchObject: {}

            };

        },
        mounted() {
            // 初始化trading的时间
            var day = new Date();
            var lastDay = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
            var toDay = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + (day.getDate()+1);


            var day1 = new Date();
            day1.setTime(day1.getTime() - 7 * 24 * 60 * 60 * 1000);
            var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
            console.log(s1);

            var day2 = new Date();
            day2.setTime(day2.getTime() - 30 * 24 * 60 * 60 * 1000);
            var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
            console.log(s2);

            this.time[0].children.time[0].startTime = lastDay;
            this.time[0].children.time[0].endTime = lastDay;
            this.time[0].children.time[1].startTime = s1;
            this.time[0].children.time[1].endTime = toDay;
            this.time[0].children.time[2].startTime = s2;
            this.time[0].children.time[2].endTime = toDay;

            var s3 = this.getMonthStartDate();
            console.log(s3);

            var s4 = this.getLast3Month();
            console.log(s4);

            var s5 = this.getWhatDate('start');
            console.log(s5);

            this.time[1].children.time[0].startTime = s3;
            this.time[1].children.time[0].endTime = toDay;
            this.time[1].children.time[1].startTime = s4.last;
            this.time[1].children.time[1].endTime = toDay;
            this.time[1].children.time[2].startTime = s5;
            this.time[1].children.time[2].endTime = toDay;

            this.searchObject.beginDate = this.time[0].children.time[1].startTime;
            this.searchObject.endDate = this.time[0].children.time[1].endTime;
            this.getDay();
        },
        methods: {
            costToggle(index) {
                console.info(index);
            },
            timeToggle(index) {
                this.time.forEach((item, idx) => {
                    if (idx == index) {
                        item.state = true;
                    } else {
                        item.state = false;
                    }
                });

                this.childrenTimeToggle(index,1);
            },
            childrenTimeToggle(idx, index) {
                var that = this;
                this.time[idx].children.time.forEach((item, childrenIndex) => {
                    if (childrenIndex == index) {
                        item.state = true;
                        that.searchObject = {
                            beginDate: item.startTime,
                            endDate: item.endTime
                        }
                        if (idx == 0) {
                            that.getDay();
                        } else if (idx == 1) {
                            that.getMonth();
                        }
                    } else {
                        item.state = false;
                    }
                });
            },
            change(t) {
                if (t < 10) {
                    return "0" + t;
                } else {
                    return t;
                }
            },
            getTime(event) {
                if (event == null) {
                    return;
                }
                this.searchObject = {
                    beginDate: event[0],
                    endDate: event[1]
                }
                this.getDay();
            },
            getMonthTime(event) {
                if (event == null) {
                    return;
                }
                this.searchObject = {
                    beginDate: event[0],
                    endDate: event[1]
                }
                this.getMonth();
            },
            getMonth() {
                var event = {};
                event.type = "month";
                event.beginDate = this.searchObject.beginDate;
                event.endDate = this.searchObject.endDate;
                this.$emit("date-change", event);

            },
            getDay() {
                var event = {};
                event.type = "day";
                event.beginDate = this.searchObject.beginDate;
                event.endDate = this.searchObject.endDate;
                this.$emit("date-change", event);
            },
            getMonthStartDate() {
                var now = new Date(); //当前日期
                var nowYear = this.change(now.getFullYear()); //当前年
                var nowMonth = this.change(now.getMonth()); //当前月
                var monthStartDate = new Date(nowYear, nowMonth, 1);
                return this.formatDate(monthStartDate);
            },
            formatDate(date) {
                var myyear = date.getFullYear();
                var mymonth = date.getMonth() + 1;
                var myweekday = date.getDate();
                if (mymonth < 10) {
                    mymonth = "0" + mymonth;
                }
                if (myweekday < 10) {
                    myweekday = "0" + myweekday;
                }
                return (myyear + "-" + mymonth + "-" + myweekday);
            },
            getLast3Month() {
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth() + 1; //0-11表示1-12月
                var day = now.getDate();
                var dateObj = {};
                if (parseInt(month) < 10) {
                    month = "0" + month;
                }
                if (parseInt(day) < 10) {
                    day = "0" + day;
                }

                dateObj.now = year + '-' + month + '-' + day;

                if (parseInt(month) == 1) { //如果是1月份，则取上一年的10月份
                    dateObj.last = (parseInt(year) - 1) + '-10-' + day;
                    return dateObj;
                }
                if (parseInt(month) == 2) { //如果是2月份，则取上一年的11月份
                    dateObj.last = (parseInt(year) - 1) + '-11-' + day;
                    return dateObj;
                }
                if (parseInt(month) == 3) { //如果是3月份，则取上一年的12月份
                    dateObj.last = (parseInt(year) - 1) + '-12-' + day;
                    return dateObj;
                }

                var preSize = new Date(year, parseInt(month) - 3, 0).getDate(); //开始时间所在月的总天数
                if (preSize < parseInt(day)) {
                    // 开始时间所在月的总天数<本月总天数，比如当前是5月30日，在2月中没有30，则取下个月的第一天(3月1日)为开始时间
                    let resultMonth = parseInt(month) - 2 < 10 ? ('0' + parseInt(month) - 2) : (parseInt(month) - 2);
                    dateObj.last = year + '-' + resultMonth + '-01';
                    return dateObj;
                }

                if (parseInt(month) <= 10) {
                    dateObj.last = year + '-0' + (parseInt(month) - 3) + '-' + day;
                    return dateObj;
                } else {
                    dateObj.last = year + '-' + (parseInt(month) - 3) + '-' + day;
                    return dateObj;
                }

            },
            getWhatDate: function (str) { //有参数传递为起始时间,无参数传递为结束时间
                // 获取时间戳和数据周期 // 开始时间，格式yyyy - MM - dd HH: mm: ss
                var timeDate = null;
                var nowdate = new Date();
                var halfYearDate = new Date(Date.now() - (365 / 2 * 24 * 3600 * 1000));
                if (str) {
                    timeDate = this.getDate(halfYearDate, str)
                } else {
                    timeDate = this.getDate(nowdate)
                }


                return timeDate
            },
            getDate(date, str) {
                // Y = date.getFullYear() + '-';
                // M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                // D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                // h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                // m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                // s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
                var Y = date.getFullYear();
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
                // h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
                // m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
                // s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                if (str) {
                    var M = parseInt(MM);
                    if (M < 9) {
                        return Y + '-' + '0' + (M + 1) + '-' + '01';
                    } else if (M == 9) {
                        return Y + '-' + '10-01';
                    } else if (M == 10) {
                        return Y + '-' + '11-01';
                    } else if (M == 11) {
                        return Y + '-' + '12-01';
                    } else if (M == 12) {
                        return (Y + 1) + '-' + '01-01';
                    }
                } else {
                    return Y + '-' + M + '-' + D + ' 23:59:59';
                }
            }
        },

        });
</script>
[/#macro]